import React, { useContext, useEffect, useState } from "react";
import { createPortal } from "react-dom";
import ThemeContext from "../../store/themeContext";
import classes from "./ThemeMask.module.scss";

export default function ThemeMask() {
    const { theme } = useContext(ThemeContext);
    const [showThemeMask, setShowThemeMask] = useState(true);
    const [themeClass, setThemeClass] = useState("dark");
    useEffect(() => {
        setShowThemeMask(true);
        const timer2 = setTimeout(() => {
            setThemeClass(theme);
        }, 500);
        const timer = setTimeout(() => {
            setShowThemeMask(false);
        }, 3000);
        return () => {
            clearTimeout(timer);
            clearTimeout(timer2);
        };
    }, [theme]);
    return createPortal(
        <div style={{ zIndex: showThemeMask ? 99 : -1, opacity: showThemeMask ? 1 : 0 }} className={`${classes["theme-mask-custom"]} ${classes[themeClass]} `}>
            <div className={classes.bg}></div>
            <div className={classes["moon-box"]}>
                <div className={classes.moon}></div>
            </div>
            <div className={classes["sun-box"]}>
                <div className={classes.sun}></div>
            </div>
            <div className={classes.sea}></div>
        </div>,
        document.querySelector("#theme-mask")
    );
}
